<!DOCTYPE html> 
<html> 
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1"> 
        <title>Switcher example</title> 

        <script type="text/javascript" src="js/jquery-1.8.2.js"></script>	

        <!-- optional --><script type="text/javascript" src="js/jquery.jswipe.js"></script><!-- optional -->

        
        <link href="css/smoothness/jquery-ui-1.9.0.custom.css" rel="stylesheet">
        <script src="js/jquery-ui-1.9.0.custom.js"></script>
        
        
        
        
        <link rel="stylesheet" type="text/css" href="css/jquery.switcher.css" />
        <script type="text/javascript" src="js/jquery.switcher.js"></script>

        
        
        <style>.myrow{clear: both;overflow: auto;margin-bottom: 1em;}</style>
    </head> 
    <body> 

        This is an example page showing the switcher plugin.<br/>
        License is GPL.

        <div style="margin:50px;" id="s1"></div>
        <script>
            $(document).ready(function() {
                $("#s1").switcher({
                    textTrue: "OK",
                    textFalse: "NO",
                    duration: 200,
                    // an optional callback function after any change
                    callbackBefore: function(newValue) {
                        //console.log(this);
                        console.log(newValue);
                        return true;
                    },
                    callbackAfter: function(newValue) {
                        //console.log(this);
                        console.log(newValue);
                        $("#resFromCallback").html($("#s1").switcher("text"));
                    }
                });
            });
        </script>
        
        
        <div class="myrow">
            <div style="float:left;">Automatic value callback:</div>
            <div id="resFromCallback" style="margin-left: 2em;border: 1px solid brown;float:left;">...</div>
        </div>
        
        <div class="myrow">
            <div style="float:left;">Retreive value (Using text):
                <input type="button" value="get value" onclick='$("#res").html($("#s1").switcher("text"));$("#res2").html(new Boolean($("#s1").switcher("val")).toString())'/></div>
            <div id="res" style="margin-left: 2em;border: 1px solid #00A000;float:left;">...</div>
            <div id="res2" style="margin-left: 2em;border: 1px solid orange;float:left;">...</div>
        </div>

        <div class="myrow">
            Enable and disable the switcher:
            <input type="button" value="disable" onclick='$("#s1").switcher("disable");'/>
            <input type="button" value="enable" onclick='$("#s1").switcher("enable");'/>
        </div>


        <div class="myrow">
            Force switcher state:
            <input type="button" value="set on" onclick='$("#s1").switcher("val", true);'/>
            <input type="button" value="set off" onclick='$("#s1").switcher("val", false);'/>
        </div>

        <div class="myrow">
            Download: <a href="switcher.zip">switcher.zip</a>
            
        </div>

       



    </body>
</html>
